/**************************
 * Layout
 **************************/
/* layout */
.wColorPicker {
  position: relative;
  display: inline-block;
  line-height: 0px;
  font-size: 0px;
  cursor: default;
}
.wColorPicker-bg {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}
.wColorPicker-holder {
  position: relative;
  display: inline-block;
  
  overflow: hidden;
}
.wColorPicker-palettes-holder {
  position: relative;
  display: inline-block;
}
.wColorPicker-zindex {
  z-index: 1000;
}
/* palettes */
.wColorPicker-palette {
  position: relative;
  display: inline-block;
  margin: 0 10px 10px 0;
}
.wColorPicker-palette-none,
.wColorPicker-palette-simple {
  margin-left: 10px;
}
/* color squares */
.wColorPicker-palette-color {
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  border-right: solid 1px;
  border-bottom: solid 1px;
  cursor: pointer;
}
.wColorPicker-palette-color-left {
  border-left: solid 1px;
}
.wColorPicker-palette-color-top {
  border-top: solid 1px;
}
/* target/input */
.wColorPicker-color-target {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 16px;
  border: solid 1px;
}
.wColorPicker-custom-input {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 70px;
  height: 16px;
  line-height: 16px;
  font-size: 9px;
  font-family: verdana;
  padding: 0 2px;
  border: solid 1px;
}
.wColorPicker-color-target,
.wColorPicker-custom-input {
  margin: 10px 10px 10px 0;
}
.wColorPicker-dropper {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  border: solid 1px;
  cursor: pointer;
}
/**************************
 * Button
 **************************/
.wColorPicker-button {
  position: relative;
  border-radius: 5px;
  border: solid #CACACA 1px;
  padding: 1px;
  cursor: pointer;
}
.wColorPicker-button-color {
  position: relative;
  border-radius: 5px;
}

/**************************
 * Themes
 **************************/
.wColorPicker-holder { border: solid 1px; }
.wColorPicker-bg, .wColorPicker-holder { border-radius: 5px; }
.wColorPicker-bg { box-shadow: inset 2px 2px 3px #FFF, 1px 1px 2px #555; }
.wColorPicker-custom-input { opacity: 0.5; }
.wColorPicker-dropper {
  opacity: 0.6;
  border-radius: 4px;
  box-shadow: inset 1px 1px 2px #FFF, 0px 0px 1px #777;
  background-color: #CACACA;
  background: no-repeat center center url('');
}

.wColorPicker-theme-classic .wColorPicker-dropper,
.wColorPicker-theme-classic .wColorPicker-custom-input,
.wColorPicker-theme-classic .wColorPicker-color-target,
.wColorPicker-theme-classic .wColorPicker-palette-color{ border-color: #3A3A3A; }
.wColorPicker-theme-classic .wColorPicker-holder { border-color: #BABABA; }
.wColorPicker-theme-classic .wColorPicker-bg { background-color: #AAAAAA; }

.wColorPicker-theme-black .wColorPicker-dropper,
.wColorPicker-theme-black .wColorPicker-color-target,
.wColorPicker-theme-black .wColorPicker-color-input,
.wColorPicker-theme-black .wColorPicker-palette-color{ border-color: #3F3F3F; }
.wColorPicker-theme-black .wColorPicker-holder { border-color: #7F7F7F; }
.wColorPicker-theme-black .wColorPicker-bg {background-color: #363636; }

.wColorPicker-theme-blue .wColorPicker-dropper,
.wColorPicker-theme-blue .wColorPicker-color-target,
.wColorPicker-theme-blue .wColorPicker-color-input,
.wColorPicker-theme-blue .wColorPicker-palette-color{ border-color: #002F4D; }
.wColorPicker-theme-blue .wColorPicker-holder { border-color: #49AFCD; }
.wColorPicker-theme-blue .wColorPicker-bg { background-color: #2F96B4; }

.wColorPicker-theme-red .wColorPicker-dropper,
.wColorPicker-theme-red .wColorPicker-color-target,
.wColorPicker-theme-red .wColorPicker-color-input,
.wColorPicker-theme-red .wColorPicker-palette-color{ border-color: #8A0F09; }
.wColorPicker-theme-red .wColorPicker-holder { border-color: #DA4F49; }
.wColorPicker-theme-red .wColorPicker-bg { background-color: #BD362F; }

.wColorPicker-theme-green .wColorPicker-dropper,
.wColorPicker-theme-green .wColorPicker-color-target,
.wColorPicker-theme-green .wColorPicker-color-input,
.wColorPicker-theme-green .wColorPicker-palette-color{ border-color: #0B670B; }
.wColorPicker-theme-green .wColorPicker-holder { border-color: #5BB75B; }
.wColorPicker-theme-green .wColorPicker-bg { background-color: #51A351; }

.wColorPicker-theme-orange .wColorPicker-dropper,
.wColorPicker-theme-orange .wColorPicker-color-target,
.wColorPicker-theme-orange .wColorPicker-color-input,
.wColorPicker-theme-orange .wColorPicker-palette-color{ border-color: #9A5700; }
.wColorPicker-theme-orange .wColorPicker-holder { border-color: #FAA732; }
.wColorPicker-theme-orange .wColorPicker-bg { background-color: #F89406; }

.wColorPicker-palette-color.active { border-color: #FF0000; }
.wColorPicker-palette-color.active-right { border-right-color: #FF0000; }
.wColorPicker-palette-color.active-bottom { border-bottom-color: #FF0000; }